<!--
 * @Author: wangding
 * @Date: 2020-11-04 18:16:13
 * @LastEditTime: 2020-12-23 17:40:32
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \solaxcloud\src\views\overview-inverter\overview-inverter.vue
-->
<template>
    <div class="payConfirm-container">
        <div class="title">{{$t('payConfirm.orderInformation')}}</div>
        <ul>
            <li>
                <span class="label">{{$t('pay.orderNumber')}}</span>
                <span class="value">{{outTradeNo}}</span>
            </li>
            <li>
                <span class="label">{{$t('warrantyStatistics.inverterSn')}}</span>
                <span class="value">{{payObj.inverterSn}}</span>
            </li>
            <li>
                <span class="label">{{$t('renew.period')}}</span>
                <span class="value">{{payObj.keepYear+' '+$t('year')}}</span>
            </li>
            <li>
                <span class="label">{{$t('payConfirm.amountOfPayment')}}</span>
                <span class="value">{{payObj.amount}}</span>
            </li>
            <li>
                <span class="label"></span>
                <span class="value">
                    <el-button type="primary" @click='pay' >{{$t('payConfirm.payment')}}</el-button>
                    <el-button @click='()=>{$router.go(-1)}' >{{$t('back')}}</el-button>
                </span>
            </li>
        </ul>
        <div class="btn-wrap">
            
        </div>
    </div>
</template>

<script>
import moment from 'moment'
export default {
    components: {

    },
    props: {

    },
    data() {
        Math.uuid = function (len, radix) { 
            var CHARS = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz'.split(''); 
            var chars = CHARS, uuid = [], i; 
            radix = radix || chars.length; 
            
            if (len) { 
                // Compact form 
                for (i = 0; i < len; i++) uuid[i] = chars[0 | Math.random()*radix]; 
            } else { 
                // rfc4122, version 4 form 
                var r; 
            
                // rfc4122 requires these characters 
                uuid[8] = uuid[13] = uuid[18] = uuid[23] = '-'; 
                uuid[14] = '4'; 
            
                // Fill in random data.  At i==19 set the high bits of clock sequence as 
                // per rfc4122, sec. 4.1.5 
                for (i = 0; i < 36; i++) { 
                if (!uuid[i]) { 
                    r = 0 | Math.random()*16; 
                    uuid[i] = chars[(i == 19) ? (r & 0x3) | 0x8 : r]; 
                } 
                } 
            } 
            
            return uuid.join(''); 
        }
        
        return {
            payObj:JSON.parse(sessionStorage.getItem('payObj')),
            outTradeNo:'',
            form:{
                solaxOrderId:'',
                goodName:'',
                goodAttribute:'',
                amount:''
            }
        };
    },
    computed: {

    },
    watch: {

    },
    created() {

    },
    mounted() {
        this.getNo()
    },
    methods: {
        async pay(){
            let res = await this.API.orderpaypalCreateOrder({
                solaxOrderId:this.outTradeNo,
                goodName:this.payObj.inverterSn,
                goodAttribute:this.payObj.keepYear,
                // amount:this.payObj.amount.slice(1),
                amount:1//后台计算金额
            })
            if(res.object){
                window.open(res.object)
            }
          this.$confirm(this.$t('payConfirm.js_loadingInfo')+this.$t('payConfirm.js_loadingInfo2'), '支付中...', {
            distinguishCancelAndClose: false,
            showClose:false,
            closeOnClickModal:false,
            confirmButtonText: this.$t('payConfirm.js_paySuccess'),
            cancelButtonText: this.$t('payConfirm.js_meetProblemsInPayment')
            })
            .then(() => {
                this.orderpaypalGetOrderStatus()
                // this.$alert(
                //     `<div>${this.$t('payConfirm.js_paySuccess')}</div>`, {
                //     iconClass:'el-icon-success',
                //     confirmButtonText: this.$t('sure'),
                //     dangerouslyUseHTMLString:true,
                //     center: true,
                //     callback: action => {
                //         this.$message({
                //         type: 'info',
                //         message: `action: ${ action }`
                //         });
                //     }
                // });
            })
            .catch(action => {
                this.orderpaypalGetOrderStatus()
                // this.$alert(
                //     `<div>${this.$t('payConfirm.js_js_payFailed')}</div>`, {
                //     iconClass:'el-icon-error',
                //     confirmButtonText: this.$t('sure'),
                //     dangerouslyUseHTMLString:true,
                //     center: true,
                //     callback: action => {
                //         this.$message({
                //         type: 'info',
                //         message: `action: ${ action }`
                //         });
                //     }
                // });
            });  
        },
        async orderpaypalGetOrderStatus(){
            let res = await this.API.orderpaypalGetOrderStatus({
                solaxOrderId:this.outTradeNo
            })
            if(res.object == 0){
                this.$alert(
                    `<div>${this.$t('payConfirm.js_paySuccess')}</div>`, {
                    iconClass:'el-icon-success',
                    confirmButtonText: this.$t('sure'),
                    dangerouslyUseHTMLString:true,
                    center: true,
                    callback: action => {
                        this.$message({
                        type: 'info',
                        message: this.$t('payConfirm.js_paySuccess')
                        });
                        this.$router.push({path:'/insurancePay'})
                    }
                });
                // this.$router.push({path:'/insurancePay'})
            }else{
                this.$alert(
                    `<div>${this.$t('payConfirm.js_js_payFailed')}</div>`, {
                    iconClass:'el-icon-error',
                    confirmButtonText: this.$t('sure'),
                    dangerouslyUseHTMLString:true,
                    center: true,
                    callback: action => {
                        this.$message({
                        type: 'info',
                        message: this.$t('payConfirm.js_js_payFailed')
                        });
                        this.$router.push({path:'/insurancePay'})
                    }
                });
                // this.$router.push({path:'/insurancePay'})
            }
        },
        getNo(){
            var sNow = "";
            var vNow = new Date();
            let PrefixInteger=function(num, length){
                return (Array(length).join('0') + num).slice(-length);
            }
            sNow += PrefixInteger(String(vNow.getFullYear()),4);
            sNow += PrefixInteger(String(vNow.getMonth() + 1),2);
            sNow += PrefixInteger(String(vNow.getDate()),2);
            sNow += PrefixInteger(String(vNow.getHours()),2);
            sNow += PrefixInteger(String(vNow.getMinutes()),2);
            sNow += PrefixInteger(String(vNow.getSeconds()),2);
            sNow += PrefixInteger(String(vNow.getMilliseconds()),3);
            this.outTradeNo=sNow+Math.uuid(8, 10);
        }
    },
};
</script>

<style  lang="less" >
.payConfirm-container{
    font-size: 14px;
    .title{
        font-weight: bold;
        height: 30px;
        border-bottom: 2px solid #f39c12;
    }
    ul{
        li{
            display: flex;
            padding: 20px 5px;
            border-bottom: 1px solid #efefef;
            &:last-child{
                border-bottom:none;
            }
            span.label{
                flex: 2;
                text-align: right;
                padding-right:12px ;
            }
            span.value{
                flex: 3;
            }
        }
    }
    .btn-wrap{
        padding: 10px 0;
        text-align: center;
    }
}
</style>
